<template>
  <!-- 商户版 销售列表  自营商城 选号网 分销网 货源-->
  <div class="goods-list-page ">
    <div class="top-box ">
      <div class="flex fbt alc">
        <div class="tabsfenxiao">
          <el-radio-group v-model="actived" @change="tabChange">
            <el-radio-button :label="tab.retailKey" v-for="tab in allFenxiao" :key="tab.retailKey">{{ tab.retailName
              }}</el-radio-button>
          </el-radio-group>
        </div>

        <el-button class="setBtn" type="primary" size="mini" plain icon="el-icon-setting"
          @click="goFenxiaoSetting">选号网管理</el-button>
      </div>

    </div>
    <div class="content-box" v-loading="loading">
      <template v-if="isShow">
      <div class="search-box">

        <!-- <div style="font-size:16px;font-weight:bold;margin-bottom:15px" class="flex" v-if="queryParams.retailKey!='zysc'">
  <span style="width:100px;text-align:right">分销网名称：</span><span>{{retailName}}</span>
</div> -->
        <div class="game-box flex">
          <span class="select-label font16">选择游戏：</span>
          <div class="select-box">
            <selectBtnVue :options="{
              valueKey: 'id',
              labelKey: 'name',
              itemWidth: '100px',
              limitShow: '100',
            }" :selected="queryParams.gameId" :list-data="gameTypes" @change="selectGameType"></selectBtnVue>
          </div>
          <!-- gameTypes -->
        </div>
        <div class="game-box flex" v-if="GameSelectedType === 0 && sysList && sysList.length">
          <span class="select-label font16">系统：</span>
          <div class="select-box">
            <selectBtnVue :options="{
              valueKey: 'id',
              labelKey: 'fieldName',
              limitShow: '10',
            }" :selected="queryParams.systemId" :list-data="sysList" @change="systemChange"></selectBtnVue>
          </div>
        </div>
        <div class="game-box flex" v-if="GameSelectedType === 0 && carrierList && carrierList.length">
          <span class="select-label font16">运营商：</span>
          <div class="select-box">
            <selectBtnVue :options="{
              valueKey: 'id',
              labelKey: 'fieldName',
              limitShow: '10',
            }" :selected="queryParams.carrierId" :list-data="carrierList" @change="getAreaList"></selectBtnVue>
          </div>
        </div>
        <div class="game-box flex" v-if="(GameSelectedType === 0 || GameSelectedType) && areaList && areaList.length">
          <span class="select-label font16">大区：</span>
          <div class="select-box">
            <selectBtnVue :options="{
              valueKey: 'id',
              labelKey: 'fieldName',
              limitShow: '10',
            }" :selected="queryParams.groupId" :list-data="areaList" @change="getServiceList"></selectBtnVue>
          </div>
        </div>
        <div class="game-box flex" v-if="(GameSelectedType === 0 || GameSelectedType) && serverList && serverList.length">
          <span class="select-label font16">服务器：</span>
          <div class="select-box">
            <selectBtnVue :options="{
              valueKey: 'id',
              labelKey: 'fieldName',
              limitShow: '10',
            }" :selected="queryParams.serverId" :list-data="serverList" @change="serverChange"></selectBtnVue>
          </div>
        </div>
        <div class="game-box input-box flex">
          <div>
            <el-select size="small" v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
              <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName"
                :value="dict.tenantId" />
            </el-select>
          </div>
          <div style="margin-left: 15px;">
            <!-- <el-input clearable placeholder="请输入你要查询的商品关键词、账号等" v-model="queryParams.keyWord" size="small" @change="search"></el-input> -->
            <el-autocomplete class="inline-input" size="small" clearable v-model="queryParams.keyWord"
              :fetch-suggestions="querySearch" placeholder="请输入商品关键词、账号等"></el-autocomplete>
          </div>
          <div class="flex search-input">
            <el-input clearable placeholder="请输入商品编号" size="small" v-model="queryParams.id" @change="search"></el-input>
            <!-- <el-select style="margin-left:10px" label="供货商" prop="createIds" v-if="pageType != 'pool'" multiple v-model="queryParams.createIds" placeholder="请选择供货商" size="small" clearable filterable>
        <el-option v-for="dict in supplyList" :key="dict.userId" :label="dict.nickName" :value="dict.userId" />
      </el-select> -->
            <el-button class="search-btn" type="primary" icon="el-icon-search" @click="search">查询</el-button>
          </div>
          <div>
            <el-button class="search-btn" type="primary" icon="el-icon-refresh-right" plain
              @click="resetQuery">重置</el-button>
          </div>
          <!-- 货源配置按钮 -->
          <div v-if="checkPermi(['zysc:huoyuanpeizhi'])">
            <el-button class="search-btn" type="primary" icon="el-icon-connection" @click="goHuoyuan">货源配置</el-button>
          </div>
          <div v-if="queryParams.retailKey != 'zysc'">
            <el-button class="search-btn" type="warning" plain icon="el-icon-connection"
              @click="openQRCode">选号网链接</el-button>
          </div>

          <!-- <div v-if="queryParams.retailKey=='zysc'">
            <el-button class="search-btn" type="warning" plain size="small" icon="el-icon-connection" @click="getDaishouwode">代售我的</el-button>
          </div> -->
        </div>
        <!-- <div class="game-box flex">
          <span class="select-label font16">历史搜索：</span>
          <div class="hot-box flex">
            <span class="hot-word" v-for="(item, i) in hotWords" :key="i">
              <span @click="hotWordClick(item)">{{ item }}</span>
              <span class="el-icon-error" @click="delHotWord(item)"></span>
            </span>
          </div>
        </div> -->
      </div>
      <div class="table_box customTab">
        <el-table stripe :data="tableData.records" @sort-change="sortFun" style="width: 100%;">
          <!-- <el-table-column type="selection" width="55">
      </el-table-column> -->
          <el-table-column label="商品编号" width="130" label-position="left" prop="id" sortable="custom" sort-by>
            <template slot-scope="scope">
              <span v-show="scope.row.ifself" class="sign" :class="{ ping: scope.row.ifself == 2 }">{{ scope.row.ifself
                == 1 ? "自" : "代" }}</span>
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="游戏名称" width="100" prop="gameName" />
          <el-table-column label="区服" width="140" prop="systemName">
            <template slot-scope="scope">
              <span>{{
                scope.row.systemName ? scope.row.systemName + "/" : ""
                }}</span>
              <span>{{
                scope.row.carrierName ? scope.row.carrierName + "/" : ""
                }}</span>
              <span>{{
                scope.row.groupName ? scope.row.groupName + "/" : ""
                }}</span>
              <span>{{ scope.row.serverName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="实名状态" width="130" prop="shiming" />
          <el-table-column label="售价" width="100" prop="newPrice" v-if="pageType == 'sale'">
            <template slot-scope="scope">
              <div>{{ scope.row.newPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column label="商品标题" min-width="300" prop="title">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="top-start">
                <div class="zdy-des">{{ scope.row.title }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column :label="pageType == 'sale' ? '供货价' : '供货价'" width="100" prop="price" sort-by sortable="custom" />
          <el-table-column label="供货商" width="150" prop="supplyName">
            <template slot-scope="scope">
              <div v-if="allYouzhiMap && allYouzhiMap[scope.row.tenantId]">
                <youzhiName :name="scope.row.supplyName"></youzhiName>
              </div>
              <div v-else>
                {{ scope.row.supplyName }}
              </div>

            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" :width="'200'">
            <template slot-scope="scope">
              <el-button type="text" @click="openIM(scope.row)">联系他</el-button>
              <el-button v-if="checkPermi(['caigoudingdan'])" type="text"
                @click="openAddOrder(scope.row)">立即提号</el-button>
              <el-button type="add" @click="viewGoods(scope.row)">商品详情</el-button>
              <el-button v-if="pageType == 'sale'" ref="copyBtn1" type="text" @click="keyCopy(scope.row)">复制</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages-box">
        <!-- <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="queryParams.pageNum"
  :page-sizes="[10, 20, 30, 40, 50, 60]"
  :page-size="queryParams.pageSize"
  layout="total, sizes, prev, pager, next"
  :total="tableData.total"
></el-pagination> -->
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
      </template>
      <template v-else>
        <el-alert
       
    title="暂未配置货源，请先配置货源"
    type="warning"
    show-icon>
  </el-alert>
       
        <div v-if="checkPermi(['zysc:huoyuanpeizhi'])">
            <el-button style="margin-left: 0;margin-top: 10px;" class="search-btn" type="primary" icon="el-icon-connection" @click="goHuoyuan">货源配置</el-button>
          </div>
      </template>
    </div>
    <!-- 一下是弹出框 -->
    <!-- 联系对方 -->
    <kefuList ref="kefuList"></kefuList>
    <!-- 选号网 -->
    <el-dialog :title="xuanhaowangname" :visible.sync="qrCodeShow" width="620px">
      <!-- <div style="margin-bottom:15px;margin-left:100px">
        <label for="">
          <b>店铺地址：</b>
          <el-input style="width:250px" @keyup.enter.native="otherShopAddressChange" v-model="otherShopAddress" placeholder="淘宝、PDD等电商平台店铺地址"></el-input>
          <el-button type="primary" @click="otherShopAddressChange">保存</el-button>
        </label>
      </div> -->
      <div v-if="qrCodeShow" ref="qrcode" style="width:300px; height:300px;margin:0 auto;margin-bottom:15px"></div>
      <div class="link-box">
        <div class="">
          <span class="mylink"> <a :href="phoneLink" target="_blank">{{ phoneLink }}</a></span>
          <el-button size="mini" @click="copy(phoneLink)">复制</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 谁代售了我的号 -->
    <!-- <el-dialog title="代售我的商家" close-on-click-modal :visible.sync="daishouwodeShow" width="960px">
      <div style="margin-bottom:15px;font-size:16px;text-align:center;line-height:30px">
        <el-table border stripe :data="daishouwode">
          <el-table-column align="center" label="商家" prop="tenantName">
          </el-table-column>
          <el-table-column align="center" label="代售游戏" prop="gameNames" />
        </el-table>
      </div>

    </el-dialog> -->

    <fenxiaoPickDialog ref="fenxiaoPickDialog"></fenxiaoPickDialog>
    <goodsInfoDetail ref="goodsInfoDetail"></goodsInfoDetail>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import selectBtnVue from "../../components/select-btn.vue";
import kefuList from "@/components/common/kefuList.vue";
import { mapGetters } from "vuex";
import { getSupplyList, getGameList } from "@/api/info/info";
import { salelistAccount } from "@/api/info/account";
import goodsListApi from "@/api/gameConfig/goodsList";
import gameDictionaryApi from "@/api/gameConfig/gameDictionary";
import { updatOtherShopAddress } from "@/api/system/user";
import fenxiaoPickDialog from "../components/fenxiaoPickDialog.vue";
import customerServiceApi from "../../../../api/pickUp/customerService";

// 查看商品弹窗
import goodsInfoDetail from "../../goodsList/goodsInfoDetail.vue";

import { fxList } from "@/api/info/rprice";
export default {
  name: "",
  components: {
    selectBtnVue,
    kefuList,
    fenxiaoPickDialog,
    goodsInfoDetail,
  },
  // props: ["type"],
  data() {
    return {
      daishouwodeShow: false,
      daishouwode: [],

      supplyShow: false,
      currentSupply: {},
      currentUrl: "",
      goodsPageShow: false,

      Code_url: "",

      computerLink: "",
      hotWords: [], //热搜词
      outIdsData: [],
      supPhoneNum: "",
      gameList: [], //游戏列表
      gameTypes: [], //销售列表的游戏列表
      tableData: {
        records: [],
        total: 0,
      },
      pageType: "sale",
      GameSelectedType: "", //筛选的游戏的类型
      sysList: [],
      carrierList: [], //运营商列表
      areaList: [], //大区列表
      serverList: [], //服务器列表
      selects: [], //表格的选中项
      ids: [], //表格选中的ids
      pushApiList: [],
      morePrice: [], //更多价格

      supplyList: [],
      levelArr: [],
      sinNumShow: "",
      unsoldFrom: {
        note: null,
      },
      showDialogTitle: "",
      dialogFormVisible: false,
      tempData: null,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        saleState: "1",
        createIds: [],
        sort: "",
        sortColumn: "",
        dataType: "all",
        keyWord: "",
        id: ""
      },
      regionalArr: [], //区服列表
      copyVlaue: "",
      customAttr: null,
      // otherShopAddress: "",
      retailName: "",
      allFenxiao: [],
      actived: "", //默认展示的分销网
      phoneLink: "", //选号网链接
      qrcode: null,
      qrCodeShow: false,
      xuanhaowangname: "", //选号网名称
      isShow :true,

    urlRelaName:''
    };
  },
  watch: {
    // shopInfo: {
    //   handler(newVal) {
    //     if (newVal && newVal.otherShopAddress)
    //       this.otherShopAddress = newVal.otherShopAddress;
    //   },
    //   immediate: true,
    //   deep: true,
    // },
    // queryData: {
    //   handler(newVal) {
    //     if (newVal.retailKey) {
    //       this.queryParams.retailKey = newVal.retailKey;
    //       this.retailName = newVal.retailName;
    //       this.initPage();
    //     } else {
    //       return this.$message.error("参数错误！");
    //     }
    //   },
    //   immediate: true,
    //   deep: true,
    // },
  },
  computed: {
    ...mapGetters(["userInfo", "shopInfo"]),
    queryData() {
      return this.$route.query;
    },
    allYouzhiMap() {
      return this.$store.getters.allYouzhiMap;
    },
    tenantList() {
      return this.$store.getters.tenantList;
    },
    retailDomain() {
      return this.$store.getters.retailDomain;
    },
  },
  created() {
    if (this.$route.query.tenantId) {
      this.queryParams.tenantId = Number(this.$route.query.tenantId);
    }
    // this.getGameList();
    let hotWords = localStorage.getItem("hotKeyWords");
    if (hotWords) {
      this.hotWords = JSON.parse(hotWords);
    }

    this.getFenxiaowang();
    // this.getData();
  },
  methods: {
    //关键字输入的时候激活建议
    querySearch(queryString, cb) {
      const restaurants = this.hotWords;
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      const arr = []
      if (results && results.length) {
        results.forEach(r => {
          arr.push({
            value: r
          })
        })
      }
      cb(arr);
    },
    // 
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.toLowerCase().includes(queryString.toLowerCase()));
      };
    },
    // 跳转分销网设置
    goFenxiaoSetting() {
      this.$router.push({
        name: "Fenxiaopeizhi",
      });
    },
    // 获取所有的分销网
    getFenxiaowang() {
      fxList({
        pageNum: 1,
        pageSize: 100,
      }).then((response) => {
        this.allFenxiao = [];
        if (response.rows.length) this.allFenxiao = response.rows;

        if(this.checkPermi(['zyscHuoyuan'])){
          this.allFenxiao.unshift({
            retailKey: "zysc",
            retailName: "自营商城",
          });
        }
        this.tabChange(this.allFenxiao[0].retailKey);
      });
    },
    // 分销网切换
    tabChange(e) {
      this.actived = e
      this.isRouter = false
      const foundItem = this.allFenxiao.find(item =>
        (item.retailKey === e && item.superId) || e === 'zysc'
      );
    
      if (foundItem) {
        this.queryParams.retailKey = e;
        this.initPage();
         this.isShow = true
      }else {
        const foundName = this.allFenxiao.find(item => item.retailKey === e);
        this.urlRelaName = foundName.retailName
        this.isShow = false
      }
    },
    // 打开货源配置
    goHuoyuan() {
      let path = this.isShow ? "/ziyingshangcheng/page/config?retailKey=" + this.actived : "/ziyingshangcheng/page/config?retailKey=" + this.actived + "&urlRelaName=" + this.urlRelaName
      this.$router.push({
        path: path,
      });
    },
    // // 获取代售我的商家列表
    // getDaishouwode() {
    //   goodsListApi.getDaishouwode().then((res) => {
    //     this.daishouwode = res.data;
    //     this.daishouwodeShow = true;
    //   });
    // },
    // // 保存三方店铺地址
    // otherShopAddressChange() {
    //   updatOtherShopAddress({
    //     tenantId: this.shopInfo.tenantId,
    //     otherShopAddress: this.otherShopAddress,
    //   }).then((r) => {
    //     if (r.code == 200) {
    //       this.$message.success("保存成功");
    //       this.$store.dispatch("getShopInfo", this.shopInfo.tenantId);
    //     }
    //   });
    // },
    // 查看商品详情页
    viewGoods(info) {
      this.$refs.goodsInfoDetail.open(info);
      // if (this.shopInfo && this.shopInfo.domain) {
      //   let host = this.shopInfo.domain;
      //   if (host.includes(",")) {
      //     host = host.split(",")[0];
      //   }
      //   let hostt = `http://${host}/pages/detail/index?id=${goodsId}&flag=saleList`;
      //   window.open(hostt, "_blank");
      // } else {
      //   this.$message.error("未找到自营商城域名！");
      // }
    },
    // 初始化
    initPage() {
      // this.pageType = pageType;
      this.sysList = [];
      this.carrierList = [];
      this.areaList = [];
      this.serverList = [];
      let saleState = this.queryParams.saleState;
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        saleState: saleState,
        sort: "",
        sortColumn: "",
        dataType: null,
        keyWord: "",
        id: "",
        retailKey: this.queryParams.retailKey,
        tenantId: this.queryParams.tenantId || ''
      };

      this.getGames();
    },
    // 生成选号网那个二维码
    // 生成二维码 选号网
    openQRCode() {
      this.allFenxiao;
      this.actived;
      const fenxiaowang = this.allFenxiao.filter(
        (r) => r.retailKey == this.actived
      );
      if (fenxiaowang && fenxiaowang.length) {
        const fenxiaowangItem = fenxiaowang[0];
        this.xuanhaowangname = fenxiaowangItem.retailName;
        this.qrCodeShow = true;
        let host = "";
        if (this.shopInfo.otherDomain) {
          if (
            this.shopInfo.otherDomain &&
            this.shopInfo.otherDomain.includes(",")
          ) {
            host = "https://" + this.shopInfo.otherDomain.split(",")[0] + "/";
          } else {
            host = "https://" + this.shopInfo.otherDomain + "/";
          }
        } else {
          host = this.retailDomain["h5"].dictValue;
        }
        this.phoneLink = `${host}?flag=${this.shopInfo.tenantId}&retailKey=${fenxiaowangItem.retailKey}`;

        this.$nextTick(() => {
          if (this.qrcode != null) {
            this.qrcode.clear(); // 清除代码
          } else {
          }
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 300,
            height: 300,
            correctLevel: QRCode.CorrectLevel.L,
          });
          //生成二维码
          this.qrcode.makeCode(this.phoneLink);
        });
      }
    },

    // 获取销售列表的游戏列表
    // 获取游戏列表
    getGames() {
      getGameList({
        retailKey: this.queryParams.retailKey,
      }).then((res) => {
        this.gameTypes = res.data;
        this.selectGameType(this.gameTypes[0].id);
      });
    },
    // 获取列表
    getList() {
      if (!this.queryParams.retailKey) {
        return this.$message.error("参数错误！");
      }

      this.loading = true;
      // 销售列表
      salelistAccount(this.queryParams)
        .then((response) => {
          this.loading = false;
          if (response.rows && response.rows.length) {
            this.tableData.records = JSON.parse(
              JSON.stringify(response.rows)
            );
            this.tableData.total = response.total;
          } else {
            this.tableData.records = [];
            this.tableData.total = 0;
            // this.$alert('暂无货源，请先货源配置中进行配置', '提示', {
            //   confirmButtonText: '确定'
            // });
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 立即下单  打开下单弹窗
    async openAddOrder(row) {
      if (row.tenantId == this.shopInfo.tenantId) {
        return this.$message.error("本店铺的商品请在商品管理中提号！");
      }
      this.$refs.fenxiaoPickDialog.open(row);
      // if (await this.getSupplyGuaranteeConfig(row.tenantId)) {
      //   this.$refs.fenxiaoPickDialog.open(row);
      // } else {
      //   return this.$message.error("供货商未开通在线支付功能！");
      // }
    },
    // // 获取供货商的包赔配置
    // async getSupplyGuaranteeConfig(tenantId) {
    //   this.baopeiList = [];
    //   try {
    //     const res = await customerServiceApi.getConfigByTenantId({
    //       configKey: "payOnline",
    //       tenantId: tenantId,
    //     });
    //     if (res.data && res.data.configValue == 2) {
    //       return false;
    //     } else {
    //       return true;
    //     }
    //   } catch (error) {
    //     return false;
    //   }
    // },
    // 联系客服
    // 联系客服
    openIM(row) {
      // 打开客服列表
      this.$refs.kefuList.open(row.tenantId, 1, {
        gameId: row.gameId,
        gameName: row.gameName,
      });
    },
    copy(txt) {
      this.$copyText(txt).then((res) => {
        this.$message.success("已复制到剪切板");
      });
    },
    // 复制信息
    // 复制商品信息
    keyCopy(item) {
      let copyVlaue =
        "商品ID：" +
        item.id +
        // "\n" +
        // "自编号：" +
        // item.thirdId +
        "\n" +
        "大区：" +
        `${item.systemName ? item.systemName + "/" : ""}${item.carrierName ? item.carrierName + "/" : ""
        }${item.groupName}${item.serverName}` +
        "\n" +
        "售价：" +
        item.newPrice +
        "\n" +
        "简介：" +
        item.des +
        "\n";
      // "商品截图：" +
      // hostt;

      this.$copyText(copyVlaue).then((res) => {
        this.$message.success("已复制到剪切板");
      });
    },
    //获取供货商接口
    getUserList() {
      getSupplyList("supplyCustomer").then((res) => {
        if (res.code == 200) {
          this.supplyList = res.data;
        }
      });
    },

    // 删除热搜词
    delHotWord(item) {
      let i = this.hotWords.indexOf(item);
      if (i != -1) {
        this.hotWords.splice(i, 1);
        localStorage.setItem("hotKeyWords", JSON.stringify(this.hotWords));
      }
    },
    // 点击热搜词
    hotWordClick(item) {
      this.queryParams.keyWord = this.queryParams.keyWord + " " + item;
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
      if (this.queryParams.keyWord) {
        let arr = this.queryParams.keyWord.split(" ");
        arr.forEach((r) => {
          if (r) {
            let i = this.hotWords.indexOf(r);
            if (i == -1) {
              this.hotWords.unshift(r);
            } else {
              this.hotWords.splice(i, 1);
              this.hotWords.unshift(r);
            }
            if (this.hotWords.length > 30) {
              this.hotWords.splice(this.hotWords.length - 1, 1);
            }
            localStorage.setItem("hotKeyWords", JSON.stringify(this.hotWords));
          }
        });
      }
    },
    // 表格排序
    sortFun(val) {
      this.queryParams.sort = val.order;
      this.queryParams.sortColumn = val.prop;
      this.getList();
    },

    // 表格选择项改变
    handleSelection(arr) {
      ////console.log("%c Line:442 🍆 表格选择改变", "color:#f5ce50", arr);
      this.selects = arr;
      this.ids = [];
      if (arr.length == 0) {
        this.ids = [];
      } else {
        arr.forEach((t) => {
          this.ids.push(t.id);
        });
      }
    },

    // 选择游戏
    selectGameType(val) {
      ////console.log("%c Line:1016 🌭 val", "color:#4fff4B", val);
      if (!val) {
        val = null;

        return;
      }
      this.sysList = [];
      this.carrierList = [];
      this.areaList = [];
      this.serverList = [];
      let dataType = this.queryParams.dataType;
      let saleState = this.queryParams.saleState;
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        saleState: saleState,
        sort: "",
        sortColumn: "",
        dataType: dataType,
        keyWord: "",
        id: "",
        retailKey: this.queryParams.retailKey,
        tenantId: this.queryParams.tenantId || ''
      };
      this.queryParams.gameId = val;

      this.gameTypes.forEach((r) => {
        if (r.id == val) {
          this.GameSelectedType = r.type;
        }
      });

      if (this.GameSelectedType === 0) {
        // 手游
        // 获取系统列表和运营商列表
        this.getSysList();
        this.getYysList();
      } else {
        // 端游
        // 获取大区列表
        this.getAreaList2();
      }

      this.search();
    },
    // 获取系统列表
    getSysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.queryParams.gameId,
          systemKey: "system",
        })
        .then((res) => {
          res.rows.unshift({
            fieldName: "全部",
            id: "",
          });
          this.sysList = res.rows;
        });
    },
    // 获取运营商列表
    getYysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.queryParams.gameId,
          systemKey: "carrier",
        })
        .then((res) => {
          res.rows.unshift({
            fieldName: "全部",
            id: "",
          });
          this.carrierList = res.rows;
        });
    },
    // 系统改变
    systemChange(e) {
      this.queryParams.systemId = e;
    },
    // 运营商改变  获取大区列表
    getAreaList(e) {
      this.queryParams.carrierId = e;
      let obj = {
        gameId: this.queryParams.gameId,
        systemKey: "group",
      };
      this.queryParams.groupId = "";
      this.queryParams.serverId = "";
      this.serverList = [];
      this.areaList = [];

      // 运营商改变 找出选择的运营商的对象
      if (e) {
        this.carrierList.forEach((i) => {
          if (i.id == e) {
            obj.systemKey = i.systemKey + "group";
          }
        });
      }
      gameDictionaryApi.getChildList(obj).then((res) => {
        res.rows.unshift({
          fieldName: "全部",
          id: "",
        });
        this.areaList = res.rows;
      });
    },
    // 大区改变  获取服务器列表
    getServiceList(e) {
      this.queryParams.groupId = e;
      this.queryParams.serverId = "";

      if (e) {
        gameDictionaryApi
          .getList({
            parentId: e,
          })
          .then((res) => {
            res.rows.unshift({
              fieldName: "全部",
              id: "",
            });
            this.serverList = res.rows;
          });
      } else {
        this.serverList = [];
      }
    },
    //端游 直接获取大区
    getAreaList2() {
      let obj = {
        gameId: this.queryParams.gameId,
        systemKey: "group",
      };
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows;
      });
    },
    // 服务器改变
    serverChange(e) {
      this.queryParams.serverId = e;
    },
    //重置
    resetQuery() {
      this.sysList = [];
      this.carrierList = [];
      this.areaList = [];
      this.serverList = [];
      let dataType = this.queryParams.dataType;
      let saleState = this.queryParams.saleState;
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        saleState: saleState,
        sort: "",
        sortColumn: "",
        dataType: dataType,
        keyWord: "",
        id: "",
        retailKey: this.queryParams.retailKey,

      };
      this.$set(this.queryParams, 'tenantId', '')
      this.getGames();
    },
  },
};
</script>
<style lang="scss" scoped>
.goods-list-page {
  // height: calc(100vh - 137px);
  // overflow-y: auto;
  border-radius: 5px;
  overflow: hidden;
  width: calc(100% - 20px);
  margin: 0 auto;
  margin-top: 10px;
  border: 1px solid #DCDFE6;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
}

.top-box {
  background-color: #f7f7f7;
  align-items: center;

  // padding: 0 10px 0 0;
  >div {
    border-bottom: 2px solid #6c5dd3;
  }

  .setBtn {
    margin-right: 10px;
    height: 26px;

  }
}

.tabsfenxiao {
  // border: 1px solid #eee;
  border-bottom: 0;
  // ::v-deep .el-radio-button{
  //   height: 26px;
  //   line-height: 26px;
  // }

  ::v-deep .el-radio-button__inner {
    padding: 10px 15px;
  }
}

.content-box {
  // border-radius: 0 0 8px 8px;
  // border: 1px solid #eee;
  padding: 10px;
}

// ::v-deep .el-dialog__body {
//   max-height: calc(100vh - 120px) !important;
//   padding-bottom: 0 !important;
// }
.zdy-des {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 6px 0;
}

.sign {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ffcc66;
  border-radius: 50%;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  margin-right: 5px;

  &.ping {
    background-color: #1890ff;
  }
}

// .tuisongbtn ::v-deep .el-dropdown-menu {
//   max-height: 600px;
//   overflow-y: hidden;
// }
.search-box {
  background-color: $fff;
  border-radius: 10px;
  padding: 20px;
  padding-bottom: 1px;
  padding-top: 0.1px;

  .game-box {
    // margin-bottom: 10px;
  }

  .search-input {
    margin-left: 15px;
  }

  .input-box {
    // margin-top: 20px;
  }
}

.select-label {
  flex-shrink: 0;
  width: 100px;
  text-align: right;
}

.hot-box {
  color: $primary;
  flex-wrap: wrap;
  max-height: 60px;
  overflow: hidden;

  .hot-word {
    margin-right: 20px;
    margin-bottom: 10px;

    >span {
      cursor: pointer;
    }

    .el-icon-error {
      margin-left: 5px;
    }
  }
}

.search-btn {
  margin-left: 10px;
}

.customTab {
  margin-top: 16px;
}

#qrCode {
  display: inline-block;
  margin: 0 auto;
  /*水平居中*/
  position: relative;
  top: 15%;

  /* img: {
    width: 200px;
    height: 200px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
  } */
}

.link-box {
  >div {
    text-align: center;
    margin-bottom: 10px;
  }

  .mylink {
    margin-right: 10px;

    a {
      color: $primary;
    }
  }
}
</style>
